import { StyleSheet, Modal } from 'react-native';
import React, { useRef, useEffect, useState } from 'react';
import { DatePicker } from 'react-native-common-date-picker';
import * as Animatable from 'react-native-animatable';
import { useTranslation } from 'react-i18next';

interface Props {
    visible: boolean;
    cancelText?: string;
    confirmText?: string;
    defaultDate?: any;
    maxDate?: string;
    yearSuffix?: string;
    monthSuffix?: string;
    daySuffix?: string;
    minDate?: string;
    cancel?: Function;
    confirm?: Function;
    type?: string;
}
export default function PickerModalData(props: Props) {
    const modalizeRef = useRef<any>(null);
    const [animationType, setAnimationType] = useState('fadeInUp');
    const { t } = useTranslation();
    const {
        visible,
        cancelText = t('SelectWeightModal.t2'),
        confirmText = t('SelectWeightModal.t1'),
        defaultDate = new Date(),
        maxDate = '2057-03-25',
        minDate = '1922-01-01',
        type = 'YYYY-MM-DD',
        cancel,
        confirm,
    } = props;
    useEffect(() => {
        if (visible) {
            setAnimationType('fadeInUp');
        }
        modalizeRef.current?.fadeInUp(500);
    }, [visible]);
    const closeModal = () => {
        setAnimationType('fadeOutDownBig');
        setTimeout(() => {
            cancel && cancel();
        }, 500);
    };
    return (
        <Modal visible={visible} transparent={true} statusBarTranslucent={true} hardwareAccelerated={true}>
            <Animatable.View style={styles.modal} ref={modalizeRef} animation={animationType} duration={500}>
                <DatePicker
                    type={type}
                    minDate={minDate}
                    cancelText={cancelText}
                    confirmText={confirmText}
                    defaultDate={defaultDate}
                    maxDate={maxDate}
                    rowHeight={60}
                    monthDisplayMode={'digit'}
                    cancel={() => closeModal()}
                    confirm={(date) => {
                        closeModal();
                        if (confirm) {
                            confirm(date);
                        }
                    }}
                />
            </Animatable.View>
        </Modal>
    );
}

const styles = StyleSheet.create({
    modal: {
        flex: 1,
        backgroundColor: 'rgba(0,0,0,0.2)',
        justifyContent: 'flex-end',
        alignItems: 'flex-end',
    },
});
